<template>
    <div>
        <div class="gradual-box clearfix">
            <div class="l-box">
                <p>在线预约</p>
                <div class="header-light twinkling"></div>
            </div>
            <div class="r-box">
                <p>预约总数</p>
                <p class="c-blue">
                    <ICountUp style="font-size: 56px;"
                          :endVal="parseInt(indexData.countNetApply)"
                          :key="Math.random()"
                          @ready="onReady"
                    />
                    <span>件</span></p>
            </div>
            <div class="r-box">
                <p>服务事项数</p>
                <p class="c-blue">220
                    <!--<ICountUp style="font-size: 56px;"
                        :endVal="parseInt(indexData.countNetMatter)"
                        :key="Math.random()"
                        @ready="onReady"
                    />-->
                    <span>项</span></p>
            </div>
            <div class="gradual-line"></div>
        </div>
        <div class="gradual-box clearfix">
            <div class="l-box">
                <p>在线办理</p>
                <div class="header-light twinkling"></div>
            </div>
            <div class="r-box">
                <p>办件总数</p>
                <p class="c-blue">
                    <ICountUp style="font-size: 56px;"
                              :endVal="parseInt(indexData.countNetAccept)"
                              :key="Math.random()"
                              @ready="onReady"
                    />
                    <span>件</span></p>
            </div>
            <div class="r-box wd-tip-wrap">
                <p>服务事项数</p>
                <p class="c-blue">
                    <!--<ICountUp style="font-size: 56px;"
                        :endVal="parseInt(indexData.countNetMatterQlc)"
                        :key="Math.random()"
                        @ready="onReady"
                    />-->295
                    <span>项</span></p>
                     <wdTip tipkey="key7" />
            </div>
            <div class="gradual-line"></div>
        </div>
        <div class="gradual-box clearfix">
            <div class="l-box">
                <p>物流快递</p>
                <div class="header-light twinkling"></div>
            </div>
            <div class="r-box">
                <p>物流总数</p>
                <p class="c-blue">
                    <!--<ICountUp style="font-size: 56px;"
                          :endVal="parseInt(indexData.countApproveExpressCase)"
                          :key="Math.random()"
                          @ready="onReady"
                    />-->32
                    <span>次</span></p>
            </div>
            <div class="r-box wd-tip-wrap">
                <p>服务事项数</p>
                <p class="c-blue">
                    <!--<ICountUp style="font-size: 56px;"
                          :endVal="parseInt(indexData.countApproveExpressMatter)"
                          :key="Math.random()"
                          @ready="onReady"
                    />-->163
                    <span>项</span></p>
                    <wdTip tipkey="key8" />
            </div>
            <div class="gradual-line"></div>
        </div>
        <div class="gradual-box clearfix">
            <div class="l-box">
                <p>电子证照</p>
                <div class="header-light twinkling"></div>
            </div>
            <div class="r-box">
                <p>调用总数</p>
                <p class="c-blue">
                    <ICountUp style="font-size: 56px;"
                          :endVal="parseInt(indexData.countCardUse)"
                          :key="Math.random()"
                          @ready="onReady"
                    />
                    <span>次</span></p>
            </div>
            <div class="r-box">
                <p>服务事项数</p>
                <p class="c-blue">
                    <!--<ICountUp style="font-size: 56px;"
                          :endVal="parseInt(indexData.countCardShare)"
                          :key="Math.random()"
                          @ready="onReady"
                    />-->295
                    <span>项</span></p>
            </div>
            <div class="gradual-line"></div>
        </div>
    </div>
</template>

<script>
    import ICountUp from 'vue-countup-v2'
    import wdTip from  '../tip'
    import API from '@/api'

    export default {
        name: 'ApptList',
        components: {
            ICountUp,
            wdTip
        },
        props:['indexData'],
        data () {
            return {

            }
        },
        mounted(){
        },
        methods: {
            onReady(instance, CountUp) {
                instance.update();
            },
        }
    }

</script>
<style lang="less">
    .gradual-box{
        width: 827px;
        height: 143px;
        position: relative;
        .header-light{
            transform: scale(0.3);
            position: absolute;
            left: -270px;
            top: -30px;
        }
        .l-box{
            float: left;
            width: 270px;
            p{
                line-height: 135px;
                text-align: center;
            }
        }
        .r-box{
            width: 278px;
            float: right;
            margin-top: 20px;
            p{
                font-size:30px;
                text-align: center;
            }
            .c-blue{
                font-size: 56px;
                font-weight: bold;
                span{
                    font-size:30px;
                }
            }
        }
        .gradual-line{
            width: 827px;
            height: 3px;
            background-image: url(./img/gradual-line.png);
            position: absolute;
            top: 0;
        }
    }
</style>
